<template>
  <div class="materials container-public">
    <div class="page-head">
      <Head></Head>
      <Mallhead @search="handleSearch"></Mallhead>
      <HeadMenu></HeadMenu>
    </div>
    <div class="materials-con">
      <!-- <BreadCrumb secondText="原辅料采购"></BreadCrumb> -->
      <div class="public-label">
        <div class="label-type" v-for="(item, index) in labelArr" :key="index">
          <div class="b">{{ item.type }}：</div>
          <span class="all" :class="{ active: item.select }" @click="getSelectAll(index)">全部</span>
          <div class="list-con" :class="{ 'is-open': item.isOpen}">
            <span
              :class="{ active: item1.select }"
              v-for="(item1, index1) in item.list"
              :key="index1"
              @click="getSelect(index, index1)"
            >
              {{ item1.text }}
            </span>
          </div>
          <div class="shrink" @click="item.isOpen = !item.isOpen">
            {{ item.isOpen ? '收起' : '更多' }}
            <i :class="[item.isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
          </div>
        </div>
        <div class="condition-box">
          <div class="condition">
            <span>最晚交货日期：</span>
            <el-date-picker size="small" v-model="value1" type="date" placeholder="选择日期">
            </el-date-picker>
          </div>
          <!-- <div class="condition">
            <span>选择供应商：</span>
            <el-select size="small" clearable v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div> -->
        </div>
        <div class="condition-box">
          <span>选中条件：</span>
          <div class="condition">
            <span v-for="(item, index) in labelArr" :key="index">
              <span v-for="(item1, index1) in item.list" :key="index1">
                <el-tag size="small" v-if="item1.select" closable="" @close="getSelect(index, index1)">{{ item1.text }}</el-tag>
              </span>
            </span>
          </div>
        </div>
      </div>
      <div class="pulick-result-show">
        <!-- <el-tabs v-model="activeName" @tab-click="_intMaterialList">
          <el-tab-pane label="全部" name="0"></el-tab-pane>
          <el-tab-pane label="企业交易商" name="1"></el-tab-pane>
          <el-tab-pane label="个人交易商" name="2"></el-tab-pane>
        </el-tabs> -->
        <el-table
          v-loading="loading"
          :data="tableData"
          :header-cell-style="tableHeader"
          :default-sort="{ prop: 'date', order: 'descending' }"
          style="width: 100%"
          class="pulic-table"
        >
          <el-table-column prop="title" label="品种" min-width="400">
            <template slot-scope="scope">
              <div class="goods-item">
                <el-image v-if="scope.row.qualityPic" :src="formatterUrl(scope.row)" fit="contain" style="width: 110px;height: 75px"></el-image>
                <div v-else class="img"></div>
                <div class="goods-info">
                  <b>{{ scope.row.title }} | {{ scope.row.variety }} | {{ scope.row.yearDate }}</b>
                  <div class="goods-company">
                    {{ scope.row.expirationName }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="质量" min-width="80">
            <template slot-scope="scope">
              <div class="quality-item">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-ziyuan145"></use>
                </svg>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="价格" min-width="120" sortable>
            <template slot-scope="scope">
              <div class="price-item">
                <div>
                  <span class="color-main">¥</span>
                  <span class="color-main price">{{ scope.row.unitPrice }}元</span>
                  <span>/吨</span>
                </div>
                <span class="price-tag">
                  {{scope.row.taxIncluded * 1 ? '含税' : '不含税'}} | 出库价
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="发布时间" width="100" sortable></el-table-column>
          <el-table-column prop="producingArea" label="产地" min-width="80"></el-table-column>
          <el-table-column prop="inventoryPlace" label="库存地" min-width="80"></el-table-column>
          <el-table-column prop="tradableTotal" label="可交易量" min-width="100" sortable>
            <template slot-scope="scope">
              <div class="price-item">
                <span class="color-main price">{{ scope.row.tradableTotal }}</span>
                <span>吨</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系方式" min-width="120">
            <template slot-scope="scope">
              <template v-if="userName">
                <div>{{scope.row.linkMan}}</div>
                <div>{{scope.row.phone}}</div>
              </template>
              <template v-else>
                <div>电话，联系人</div>
                <div><span class="color-main">登陆</span>后可看</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="详情" width="100px" fixed="right">
            <template slot="header">
              <TablePagination
                :current-page="currentPage"
                :total="total"
                @current-change="handleCurrentChange"
              ></TablePagination>
            </template>
            <template slot-scope="scope">
              <el-button type="success" size="mini" @click="goDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { intMaterialList } from "@/api/mall/Materials";
import TablePagination from "@/components/TablePagination"
export default {
  name: "Materials",
  components: {
    TablePagination
  },
  data() {
    return {
      loading: false,
      labelArr: [
        {
          type: "大类",
          prop: 'bigCategory',
          select: true,
          isOpen: false,
          list: []
        },
        {
          type: "小类",
          prop: 'smallCategory',
          select: true,
          isOpen: false,
          list: []
        },
        {
          type: "品种",
          prop: 'variety',
          select: true,
          isOpen: false,
          list: []
        },
        {
          type: "等级",
          prop: 'grade',
          select: true,
          isOpen: false,
          list: []
        },
        {
          type: "产地",
          prop: 'producingArea',
          select: true,
          isOpen: false,
          list: []
        },
        {
          type: "库存地",
          prop: 'inventoryPlace',
          select: true,
          isOpen: false,
          list: []
        }
      ],
      searchValue: '',
      value1: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
      ],
      value: "",
      activeName: "0",
      tableHeader: {
        background: "#f0f2f5",
      }, // 表头颜色加粗设置
      currentPage: 1,
      total: 20,
      tableData: [],
    };
  },
  computed: {
    userName() {
      return this.$store.state.xbsgUserInfo.userName;
    },
  },
  created() {
    const labelList = ["material_big_category", "material_small_category", "material_variety", "material_grade", 'producing_area', 'inventory_place']
    labelList.forEach((item, index) => {
      this.getDicts(item).then(response => {
        const options = response.data.map(item => {
          return {
            text: item.dictLabel,
            select: false
          }
        })
        this.$set(this.labelArr[index], 'list', options)
      });
    })
  },
  mounted() {
    this._intMaterialList()
  },
  methods: {
    formatterUrl ({ qualityPic }) {
      return JSON.parse(qualityPic) ? JSON.parse(qualityPic)[0] : ''
    },
    handleParams () {
      return this.labelArr.reduce((pre, next) => {
        const select = next.list.reduce((pre1, next1) => {
          if (next1.select) {
            pre1.push(next1.text)
          }
          return pre1
        }, [])
        pre[next.prop] = select.join(',')
        return pre
      }, {})
    },
    // 查询原材料采购列表
    async _intMaterialList() {
      const params = {
        searchValue: this.searchValue,
        // type: this.activeName,
        ...this.handleParams()
      }
      this.loading = true
      const res = await intMaterialList(params).finally(() => {
        this.loading = false
      })
      if (res.code === 200) {
        this.tableData = res.rows
      }
    },
    // 搜索
    handleSearch (search) {
      this.searchValue = search
      this._intMaterialList()
    },
    getSelect(index, index1) {
      let temItem = this.labelArr[index];
      temItem.list[index1].select = !temItem.list[index1].select;
      if (temItem.list.some(item => item.select)) {
        temItem.select = false
      }
    },
    // 全选
    getSelectAll (index) {
      let temItem = this.labelArr[index];
      temItem.select = !temItem.select
      temItem.select && temItem.list.forEach(item => {
        item.select = false;
      })
    },
    goDetail(row) {
      this.$router.push({ name: 'MaterialsDetail', params: { id: row.id } })
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
    }
  },
};
</script>
<style scoped>
::v-deep .el-table .cell {
  overflow: unset;
}
</style>
<style scoped lang='scss'>
@import "@/style/color.scss";
.materials-con {
  width: $bigWidth;
  background-color: #fff;
  margin: 0 auto;
}
</style>